<template>
  <div>
    <!-- :value 动态设置 value 属性 -->
    <!-- 数据变化会影响视图, 单向的 -->
    <!-- 用户名: <input :value="msg" type="text"> -->
    <!-- v-model 双向数据绑定 -->
    <!-- 语法: v-model="变量" -->
    <!-- v-model 绑定的其实是 input 的 value 属性 -->
    用户名: <input v-model="username" type="text"><br>
    <!-- 为什么 vue 要设计双向绑定呢? -->
    <!-- 假设没有双向绑定, 用户输入完用户名密码后, 点击登录 -->
    <!-- 获取用户输入的用户名和密码, 此时需要获取 DOM 元素 -->
    <!-- DOM 对象.value 才能获取到用户名和密码 -->
    <!-- 
      现在有了双向绑定后, 只需要将表单元素和变量进行绑定
      用户点击登录时, 直接取变量的值就可以获取到用户名密码了
     -->
    自我介绍:
    <textarea v-model="intro" name="" id="" cols="30" rows="10"></textarea><br>
    <!-- v-model 用在其他表单元素上的情况 -->
    来自于:
    <!-- 在 select 上使用时, 将 option 的 value 属性设置在 select 绑定的数据上了, 可以获取到用户选择的选项 -->
    <!-- 注意事项: 使用 v-model 的时候, 需要给每一个 option 设置 value 属性, v-model 其实就是将用户选择的 option 的value 绑定给了变量 -->
    <select v-model="from">
      <option value="wh">武汉</option>
      <option value="bj">北京</option>
      <option value="sz">深圳</option>
      <option value="sh">上海</option>
      <option value="cd">成都</option>
    </select><br>

    <!-- 
      在 checkbox 上使用时, 分两种情况
      1. 绑定的数据是数组类型, 将 value 属性的值加到数组中
      2. 绑定的数据是非数组类型 (其他类型全部都会隐式转换成 boolean 类型), 将 checked 设置给变量 isAll
     -->
    兴趣爱好:
    <input v-model="hobby" value="smoking" type="checkbox" /> 抽烟
    <input v-model="hobby" value="drink" type="checkbox" /> 喝酒
    <input v-model="hobby" value="hotHead" type="checkbox" /> 烫头
    <br>
    全选 <input v-model="isAll" type="checkbox" />
    <!-- 
      小结: 在 checkbox 上使用 v-model 时, 分两种情况:
      1. 绑定的数据是数组类型时, 绑定的就是 value 属性
      2. 绑定的数据是非数组类型时, 其实就是 boolean 值, 绑定的是 checked 属性
     -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: 'Hello',
      intro: '',
      from: '',
      hobby: [],
      isAll: true
    }
  }
}
</script>

<style>

</style>